iT邦幫忙

2024 iThome 鐵人賽

DAY 28
0
Modern Web

html跟css神奇的化學反應系列 第 28

day 28 css 的 !important

  • 分享至 

  • xImage
  •  

!important的中文是重要的意思,那什麽是重要的?

在css中!important是用於增加屬性或值比一般更重要的程度。假設如果你使用了!important之後他將會覆蓋元素上特定屬性的所有先前樣式規則。

        second{
            background-color: black;
        }
        #third_id{
            background-color: gray;
        }
        p{
            background-color: blue;
        }
        p>This is the first element.</p>
        <p class="second">This is the second element.</p>
        <p id="third_id">This is the third element.</p>

原本是
https://ithelp.ithome.com.tw/upload/images/20241004/20168629eVIl14ihS2.png

當在css的p加上時

p{
   background-color: blue !important; 
}

會變成
https://ithelp.ithome.com.tw/upload/images/20241004/20168629q0rhdzO0vz.png

覆蓋規則的唯一方法!important 是在原始程式碼中的聲明中包含!important 具有相同或更高特異性的另一個規則 - 問題就開始了!這使得 CSS 程式碼變得混亂並且調試會很困難,尤其是當你有一個很大的樣式表時!

當在三個都加上時會變成

        .second{
            background-color: black !important;
        }
        #third_id{
            background-color: gray !important;
        }
        p{
            background-color: blue !important; 
        }

https://ithelp.ithome.com.tw/upload/images/20241004/20168629t3jSw37Q7w.png

但在一般寫程式的時候其實是不會太用到這個屬性的

會知道這個屬性是因爲之前在刻一個網站時有看到對方寫以及自己在寫程式碼時遇到網頁本身有預設!important這個屬性去瞭解后才想説跟大家分享這個特別的屬性

那我們今天就到這裏啦~我們明天見~


上一篇
day 27 css 的 opacity
下一篇
day 29 可用套件select2
系列文
html跟css神奇的化學反應30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言